<template>
  <div class="bank-card-validation-example">
    <div class="container mt-4">
      <h2>银行卡验证示例</h2>
      
      <div class="row">
        <div class="col-md-6">
          <div class="card">
            <div class="card-header">
              <h5>银行卡信息输入</h5>
            </div>
            <div class="card-body">
              <div class="mb-3">
                <label for="cardNumber" class="form-label">银行卡号</label>
                <input 
                  type="text" 
                  class="form-control" 
                  id="cardNumber"
                  v-model="cardNumber"
                  placeholder="请输入银行卡号"
                  @input="handleCardNumberInput"
                >
              </div>
              
              <div class="mb-3">
                <label for="bankName" class="form-label">开户银行</label>
                <input 
                  type="text" 
                  class="form-control" 
                  id="bankName"
                  v-model="bankName"
                  placeholder="请输入银行名称"
                  @input="handleBankNameInput"
                >
              </div>
              
              <button 
                type="button" 
                class="btn btn-primary"
                @click="validateCard"
              >
                验证银行卡信息
              </button>
            </div>
          </div>
        </div>
        
        <div class="col-md-6">
          <div class="card">
            <div class="card-header">
              <h5>验证结果</h5>
            </div>
            <div class="card-body">
              <div v-if="!validationResult" class="text-muted">
                请输入银行卡信息进行验证
              </div>
              
              <div v-else>
                <!-- 总体验证状态 -->
                <div class="mb-3">
                  <span class="badge" :class="validationResult.isValid ? 'bg-success' : 'bg-danger'">
                    {{ validationResult.isValid ? '验证通过' : '验证失败' }}
                  </span>
                </div>
                
                <!-- 详细验证信息 -->
                <div class="validation-details">
                  <div class="mb-2">
                    <i class="fas" :class="validationResult.cardNumberValid ? 'fa-check text-success' : 'fa-times text-danger'"></i>
                    <span class="ms-2">银行卡号格式：{{ validationResult.cardNumberValid ? '正确' : '错误' }}</span>
                  </div>
                  
                  <div class="mb-2">
                    <i class="fas" :class="validationResult.bankNameValid ? 'fa-check text-success' : 'fa-times text-danger'"></i>
                    <span class="ms-2">银行名称：{{ validationResult.bankNameValid ? '有效' : '无效' }}</span>
                  </div>
                  
                  <div class="mb-2">
                    <i class="fas" :class="validationResult.bankMatch ? 'fa-check text-success' : 'fa-times text-danger'"></i>
                    <span class="ms-2">银行匹配：{{ validationResult.bankMatch ? '匹配' : '不匹配' }}</span>
                  </div>
                </div>
                
                <!-- 识别的银行信息 -->
                <div v-if="validationResult.detectedBank" class="mt-3">
                  <h6>识别的银行信息：</h6>
                  <div class="bg-light p-2 rounded">
                    <div><strong>银行名称：</strong>{{ validationResult.detectedBank.name }}</div>
                    <div><strong>银行简称：</strong>{{ validationResult.detectedBank.shortName }}</div>
                    <div><strong>BIN码：</strong>{{ validationResult.detectedBank.bin }}</div>
                  </div>
                </div>
                
                <!-- 标准化银行名称 -->
                <div v-if="validationResult.standardizedBankName" class="mt-3">
                  <h6>标准化银行名称：</h6>
                  <div class="bg-info bg-opacity-10 p-2 rounded">
                    {{ validationResult.standardizedBankName }}
                  </div>
                </div>
                
                <!-- 错误信息 -->
                <div v-if="validationResult.errors && validationResult.errors.length > 0" class="mt-3">
                  <h6 class="text-danger">错误信息：</h6>
                  <ul class="list-unstyled">
                    <li v-for="error in validationResult.errors" :key="error" class="text-danger">
                      <i class="fas fa-exclamation-triangle me-1"></i>{{ error }}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 支持的银行列表 -->
      <div class="row mt-4">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h5>支持的银行列表</h5>
            </div>
            <div class="card-body">
              <div class="row">
                <div v-for="bank in supportedBanks" :key="bank.name" class="col-md-3 col-sm-6 mb-2">
                  <div class="border rounded p-2 text-center">
                    <div class="fw-bold">{{ bank.name }}</div>
                    <div class="text-muted small">{{ bank.shortName }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { validateBankCard, getSupportedBanks, formatCardNumber } from '@/utils/bankCardValidator'

// 响应式数据
const cardNumber = ref('')
const bankName = ref('')
const validationResult = ref(null)
const supportedBanks = ref([])

// 处理银行卡号输入
const handleCardNumberInput = () => {
  // 格式化显示银行卡号（每4位加空格）
  const formatted = formatCardNumber(cardNumber.value)
  if (formatted !== cardNumber.value) {
    cardNumber.value = formatted
  }
}

// 处理银行名称输入
const handleBankNameInput = () => {
  // 可以在这里添加银行名称的实时提示功能
}

// 验证银行卡
const validateCard = () => {
  if (!cardNumber.value.trim() || !bankName.value.trim()) {
    validationResult.value = {
      isValid: false,
      cardNumberValid: false,
      bankNameValid: false,
      bankMatch: false,
      detectedBank: null,
      standardizedBankName: null,
      errors: ['请输入银行卡号和银行名称']
    }
    return
  }
  
  try {
    // 移除银行卡号中的空格进行验证
    const cleanCardNumber = cardNumber.value.replace(/\s/g, '')
    validationResult.value = validateBankCard(cleanCardNumber, bankName.value)
  } catch (error) {
    console.error('验证失败:', error)
    validationResult.value = {
      isValid: false,
      cardNumberValid: false,
      bankNameValid: false,
      bankMatch: false,
      detectedBank: null,
      standardizedBankName: null,
      errors: ['验证过程中发生错误']
    }
  }
}

// 页面加载时获取支持的银行列表
onMounted(() => {
  supportedBanks.value = getSupportedBanks()
})
</script>

<style scoped>
.bank-card-validation-example {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.validation-details {
  border-left: 3px solid #007bff;
  padding-left: 1rem;
}

.card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: none;
}

.card-header {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border-bottom: none;
}

.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-primary {
  background: linear-gradient(135deg, #007bff, #0056b3);
  border: none;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}
</style>